import React from 'react';
import ReactApexChart from 'react-apexcharts';
import { ApexOptions } from 'apexcharts';

interface FunnelDataPoint {
  stage: string;
  count: number;
}

interface FunnelChartProps {
  data: FunnelDataPoint[];
  height?: number;
  colors?: string[];
}

const FunnelChart: React.FC<FunnelChartProps> = ({ 
  data, 
  height = 350,
  colors = ['#6366f1', '#818cf8', '#a5b4fc', '#c7d2fe']
}) => {
  const series = [{
    name: '用户数',
    data: data.map(item => item.count)
  }];

  const options: ApexOptions = {
    chart: {
      type: 'bar',
      height,
      fontFamily: 'Inter, Noto Sans SC, sans-serif',
      toolbar: { show: false },
      animations: { enabled: true, speed: 800 }
    },
    plotOptions: {
      bar: {
        horizontal: true,
        distributed: true,
        barHeight: '80%',
        dataLabels: {
          position: 'center'
        }
      }
    },
    colors,
    dataLabels: {
      enabled: true,
      textAnchor: 'middle',
      formatter: function (val, opt) {
        const stage = data[opt.dataPointIndex]?.stage || '';
        return `${stage}: ${val}`;
      },
      style: {
        colors: ['#fff'],
        fontSize: '12px',
        fontWeight: 'bold'
      }
    },
    xaxis: {
      categories: data.map(item => item.stage),
      labels: { show: false }
    },
    yaxis: {
      labels: { show: false }
    },
    grid: { show: false },
    legend: { show: false },
    tooltip: {
      y: {
        formatter: (val) => `${val} 人`
      }
    }
  };

  return (
    <ReactApexChart 
      options={options} 
      series={series} 
      type="bar" 
      height={height} 
    />
  );
};

export default FunnelChart; 